<template>
  <el-dialog title="编辑背景" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" append-to-body>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="背景颜色">
        <el-radio-group v-model="form.bgColorVisible">
          <el-radio :label="false">默认</el-radio>
          <el-radio :label="true" style="position: relative;">
            <span>自定义</span>
            <el-color-picker v-if="form.bgColorVisible" v-model="form.bgColor" size="mini" style="position: absolute;top: -8px;right: -35px;" />
          </el-radio>
        </el-radio-group>

        <div v-if="form.bgColorVisible">
          <el-form-item label="不透明度">
            <el-slider v-model="form.opacity" style="width: 200px;" />
          </el-form-item>
        </div>
      </el-form-item>
      <el-divider />
      <el-form-item label="背景图片">
        <el-radio-group v-model="form.bgImgVisible">
          <el-radio :label="false">隐藏</el-radio>
          <el-radio :label="true">显示</el-radio>
        </el-radio-group>
        <div v-if="form.bgImgVisible">
          <el-upload
            class="upload-demo"
            :action="uploadurl"
            :headers="{Authorization: 'Bearer ' + token }"
            :show-file-list="false"
            name="imgfile"
            :on-success="onSuccess"
          >
            <div style="display: flex; align-items: center;">
              <el-image style="width: 100px; height: 100px; background-color: #f6f6f6; border: 1px solid #e5e5e5;margin-right: 10px;" :src="form.bgImg" fit="contain" />
              <div><el-button type="primary"><i class="el-icon-plus" />上传替换</el-button></div>
            </div>
            <div slot="tip" class="el-upload__tip">建议尺寸：640px*1600px，其中主要展示区域高度为1008px，大小不超过1M</div>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getTaskData } from '@/api/system/buzTask'
import bgImg from '@/assets/images/gameBg.jpg'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      form: {
        bgColorVisible: false,
        bgColor: '',
        opacity: 100,
        bgImgVisible: true,
        bgImg: bgImg
      },
      dialogVisible: false,
      uploadurl: process.env.VUE_APP_BASE_API + '/system/buzTask/uploadImg',
      token: getToken()
    }
  },
  methods: {
    open() {
      // console.log(id, 'id')
      this.dialogVisible = true
      // this.getDetail(id)
    },
    handleClose() {
      this.dialogVisible = false
      this.buzTask = {}
    },
    getDetail(id) {
      getTaskData(id).then(res => {
        if (res.code === 200) {
          this.buzTask = res.data.buzTask
          this.dialogVisible = true
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    onConfirm() {
      // TODO 提交数据
      console.log('提交数据', this.form)
      // this.dialogVisible = false
    },
    onSuccess(res, file) {
      console.log(file)
      console.log('上传成功, 把图片地址赋值 form.bgImg')
      if (res.code === 200) {
        // 发送修改父级界面的背景图片
        this.$parent.updateBgImg(res.imgUrl)
        this.form.bgImg = res.imgUrl
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }
    }
  }
}
</script>

<style scoped>
 .el-divider--horizontal{
    background: 0 0;
    border-top: 1px dashed #DCDFE6;
 }
</style>
